<%--&lt;%&ndash;--%>
<%--  Created by IntelliJ IDEA.--%>
<%--  User: pc--%>
<%--  Date: 2022/12/15--%>
<%--  Time: 20:57--%>
<%--  To change this template use File | Settings | File Templates.--%>
<%--&ndash;%&gt;--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<html lang="en">--%>
<%--<head>--%>
<%--  <meta charset="UTF-8">--%>
<%--  <title>Title</title>--%>
<%--&lt;%&ndash;  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>&ndash;%&gt;--%>
<%--&lt;%&ndash;  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>&ndash;%&gt;--%>
<%--</head>--%>
<%--<body>--%>
<%--<div id = "pie" style="width: 1000px; height :800px"></div>--%>
<%--<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>--%>
<%--<script>--%>
<%--  const option = {--%>
<%--    title: {--%>
<%--      text: '各班男女人数饼状图',--%>
<%--      subtext: '205815班-205819班',--%>
<%--      left: 'left'--%>
<%--    },--%>
<%--    legend: {--%>
<%--      top: 'bottom'--%>
<%--    },--%>
<%--    toolbox: {--%>
<%--      show: true,--%>
<%--      feature: {--%>
<%--        mark: { show: true },--%>
<%--        dataView: { show: true, readOnly: false },--%>
<%--        restore: { show: true },--%>
<%--        saveAsImage: { show: true }--%>
<%--      }--%>
<%--    },--%>
<%--    series: [--%>
<%--      {--%>
<%--        name: 'Nightingale Chart',--%>
<%--        type: 'pie',--%>
<%--        radius: [50, 250],--%>
<%--        center: ['50%', '50%'],--%>
<%--        roseType: 'area',--%>
<%--        itemStyle: {--%>
<%--          borderRadius: 8--%>
<%--        },--%>
<%--        data: [--%>
<%--          { value: 40, name: 'rose 1' },--%>
<%--          { value: 38, name: 'rose 2' },--%>
<%--          { value: 32, name: 'rose 3' },--%>
<%--          { value: 30, name: 'rose 4' },--%>
<%--          { value: 28, name: 'rose 5' },--%>
<%--          { value: 26, name: 'rose 6' },--%>
<%--          { value: 22, name: 'rose 7' },--%>
<%--          { value: 18, name: 'rose 8' }--%>
<%--        ]--%>
<%--      }--%>
<%--    ]--%>
<%--  };--%>

<%--  //初始化容器--%>
<%--  var chartDom = document.getElementById('pie');--%>
<%--  var myChart = echarts.init(chartDom);--%>
<%--  //设置配置项--%>
<%--  myChart.setOption(option);--%>
<%--  //--%>
<%--</script>--%>
<%--</body>--%>
<%--</html>--%>











//echartsPage

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Echarts</title>
  <meta charset="UTF-8">
  <title>趋势图</title>
  <%--    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>--%>
  <%--    <script src="js/echarts.js"></script>--%>
  <%--    <script src="js/jquery.js"></script>--%>
  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

  <style>
    div{float: left;  white-space: nowrap;}
  </style>

</head>
<body>

<div id="main" style="width: 600px; height: 400px;background-color: chartreuse"></div>
<br>


<script type="text/javascript">



  var myChartproCountTrend = echarts.init(document.getElementById('main'));
  // 显示标题，图例和空的坐标轴
  var option = ({
    color: ["#00FFFF"],
    title: {
      text: '分数比例图'
    },
    tooltip: {
      trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
    },
    legend: {
      // name :"项目总数趋势(季度)",
      data: ['分数统计']
    },
    xAxis: {
      name: "分数",
      type: 'category',
      data: []
    },
    yAxis: {
      name: "次数"
    },
    series: [{
      name: '次数',
      type: 'line',
      data: [],
      color: ["#FCCE10"],//黄色
      itemStyle: {        //上方显示数值
        normal: {
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: { //数值样式
              color: 'black',
              fontSize: 16
            }
          }
        }
      }
    },
      {
        type: 'bar',
        data: []
      }
    ]
  });


  // myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画


  //====== 获取后台数据,并加载 到echarts 表格

  var namesNew = [];     //类别数组（实际用来盛放X轴坐标值）
  var numsNew = [];       //销量数组（实际用来盛放Y坐标值）

  $.ajax({
    type: "get",
    async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    url: "/ScoreInfo",
    dataType: "json",
    success: function (data) {
      // alert("================"+data);  调试data 是否有数据

      //请求成功时执行该函数内容，result即为服务器返回的json对象
      if (data.code == 'success') {

        var obj = eval(data.items);     //解析后台传来的json数据

        for (var i = 0; i < obj.length; i++) {
          namesNew.push(obj[i].name);

          numsNew.push(obj[i].num);
        }


        myChartproCountTrend.hideLoading(); //隐藏加载动画

        myChartproCountTrend.setOption({ //加载数据图表
          xAxis: {
            data: namesNew
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '次数',
            data: numsNew
          }, {
            name: '次数',
            data: numsNew
          }
          ]
        });
      }
      else {
        alert("后台数据获取失败!");
      }
    },

    error: function (errorMsg) {
      //请求失败时执行该函数
      alert("图表请求数据失败!");
      myChartproCountTrend.hideLoading();
    }
  });



  myChartproCountTrend.setOption(option);


</script>
<%--<a href="/teacher_main.jsp" > 返回 </a>--%>
</body>
</html>
